<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="1:西药 2:中药">
              <a-input placeholder="请输入1:西药 2:中药" v-decorator="['drugType', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="oneTypeName">
              <a-input placeholder="请输入oneTypeName" v-decorator="['oneTypeName', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="operator">
              <a-input placeholder="请输入operator" v-decorator="['operator', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :gutter="8">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="opeDate">
              <a-date-picker
                placeholder="请输入opeDate"
                style="width:100%"
                :showTime="true"
                format="YYYY-MM-DD HH:mm:ss"
                v-decorator="[ 'opeDate', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="药品信息二级分类表" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="knoDrugTwoTypeTable.loading"
            :columns="knoDrugTwoTypeTable.columns"
            :dataSource="knoDrugTwoTypeTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        <a-tab-pane tab="药品信息子表" :key="refKeys[1]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[1]"
            :loading="knoDrugInfAttTable.loading"
            :columns="knoDrugInfAttTable.columns"
            :dataSource="knoDrugInfAttTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
      </a-tabs>

    </a-spin>
  </a-modal>
</template>

<script>

  import moment from 'moment'
  import pick from 'lodash.pick'
  import { FormTypes } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'

  export default {
    name: 'KnoDrugInfOwnerModal',
    mixins: [JEditableTableMixin],
    data() {
      return {
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
        },
        refKeys: ['knoDrugTwoType', 'knoDrugInfAtt', ],
        activeKey: 'knoDrugTwoType',
        // 药品信息二级分类表
        knoDrugTwoTypeTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: 'twoTypeName',
              key: 'twoTypeName',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'operator',
              key: 'operator',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'opeType',
              key: 'opeType',
              type: FormTypes.inputNumber,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'opeDate',
              key: 'opeDate',
              type: FormTypes.datetime,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugInfOwnerId',
              key: 'drugInfOwnerId',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
          ]
        },
        // 药品信息子表
        knoDrugInfAttTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: 'drugsGenName',
              key: 'drugsGenName',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugsEngName',
              key: 'drugsEngName',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugsPinyin',
              key: 'drugsPinyin',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugCom',
              key: 'drugCom',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugPro',
              key: 'drugPro',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'applicable',
              key: 'applicable',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'specs',
              key: 'specs',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'usageDosage',
              key: 'usageDosage',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'adverseReactions',
              key: 'adverseReactions',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'taboo',
              key: 'taboo',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'carefulMatter',
              key: 'carefulMatter',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'interation',
              key: 'interation',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugsOverdose',
              key: 'drugsOverdose',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'sto',
              key: 'sto',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'packing',
              key: 'packing',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'validityTerm',
              key: 'validityTerm',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'executeStandard',
              key: 'executeStandard',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'approvalNumber',
              key: 'approvalNumber',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'companyName',
              key: 'companyName',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'operator',
              key: 'operator',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'opeDate',
              key: 'opeDate',
              type: FormTypes.datetime,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
            {
              title: 'drugTwoTypeId',
              key: 'drugTwoTypeId',
              type: FormTypes.input,
              defaultValue: '',
              placeholder: '请输入${title}',
            },
          ]
        },
        url: {
          add: "/knowledge/knoDrugInfOwner/add",
          edit: "/knowledge/knoDrugInfOwner/edit",
          knoDrugTwoType: {
            list: '/knowledge/knoDrugInfOwner/queryKnoDrugTwoTypeByMainId'
          },
          knoDrugInfAtt: {
            list: '/knowledge/knoDrugInfOwner/queryKnoDrugInfAttByMainId'
          },
        }
      }
    },
    methods: {
 
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'drugType', 'oneTypeName', 'operator', 'opeType', 'opeDate', ))
          // 时间格式化
          this.form.setFieldsValue({ opeDate: this.model.opeDate ? moment(this.model.opeDate) : null })
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.knoDrugTwoType.list, params, this.knoDrugTwoTypeTable)
          this.requestSubTableData(this.url.knoDrugInfAtt.list, params, this.knoDrugInfAttTable)
        }
      },
 
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        //时间格式化
        main.opeDate = main.opeDate ? main.opeDate.format('YYYY-MM-DD HH:mm:ss') : null;
        return {
          ...main, // 展开
          knoDrugTwoTypeList: allValues.tablesValue[0].values,
          knoDrugInfAttList: allValues.tablesValue[1].values,
        }
      }
    }
  }
</script>

<style scoped>
</style>